@import url('https://fonts.googleapis.com/css2?family=Whisper&display=swap');

body{
font-family: Comic Sans MS;
background-image: linear-gradient(#ea7a79, #d6235d, #f8bb97);
}

h1 {
text-align: center;
font-variant: small-caps;
text-shadow: 6px 6px 15px rgba(16, 32, 245, 0.4);
color: rgba(153, 9, 241, 0.9);
}

h2 {
font-family: "Whisper", cursive;
font-style: italic; */;
text-align: center;
font-size: 30px;
text-shadow: 6px 6px 15px rgba(16, 32, 245, 0.4);
color: #003366;
}

Project requirements

For GitHub, I created an account of my own and, as required, created a file called “Stats 220 repo”. Then, I also will upload my project_1 HTML file to there. Then, you can check from this link. Then, for this project. First, I created a new folder in R Studio named “Project 1” and saved it in a folder named “Stats 220” on my computer. Secondly, I also created two different R Script files of “meme.R” and “animation.R” successively to edit the code of different contents. At the same time, all the images used in the project are stored in the same folder named “Project 1” and used in the code below. Finally, a Markdown file named “index.Rmd” is created for consolidation and induction.

This is a screenshot of where the documents are stored.

library(magick)
image_png <- image_read("location.png") %>%
image_resize("500x500!")
image_png

There are my two images about my meme

These two memes of mine illustrate how to behave differently in two moods.

library(magick)
library(tidyverse)

# The First meme
sad_cartoon <- image_read("meme_1.gif") %>%
  image_resize("300 x 300!")

# The Second meme  
happiness <- image_read("meme_2.gif") %>%
  image_resize("300 x 300!")

# Create two picture descriptions
# Picture1-separate1
first_separate <- image_blank(width = 300, height = 300, color = "#000000") %>%
  image_annotate(text = "To do lots\n of homeworks", color = "#FFFFFF",size = 35, font = "Impact", gravity = "center")
first_separate

# Picture2-separate2
second_separate <- image_blank(width = 300, height = 300, color = "#ADD8E6") %>%
  image_annotate(text = "Finished \n homeworks", color = "#000000",size = 35, font = "Impact", gravity = "center")
second_separate

# Put these pictures together
# For the first meme and separate1
top_row <- image_append(c(first_separate, sad_cartoon))
top_row

# For the second meme and separate2
bottom_row <- image_append(c(second_separate, happiness))
bottom_row

# The whole meme
images_meme <- image_append(c(top_row, bottom_row), stack = TRUE) %>%
  image_scale(300)
images_meme

# Save my meme
final_meme <- (images_meme)
image_write(images_meme, "my_meme.png")

There are my four images about my animation

I used 4 memes of an animated character in four states.

library(magick)
library(tidyverse)

# The First animation
image_1 <- image_read("animation_1.gif") %>%
  image_resize("300x300!") %>%
  image_convert("png")
image_1

# The Second animation
image_2 <- image_read("animation_2.gif") %>%
  image_resize("300x300!") %>%
  image_convert("png")
image_2

# The Third animation
image_3 <- image_read("animation_3.gif") %>%
  image_resize("300x300!") %>%
  image_convert("png")
image_3

# The Forth animation
image_4 <- image_read("animation_4.gif") %>%
  image_resize("300x300!") %>%
  image_convert("png")
image_4

# Combine all the frames
frames <- c(image_1, image_2, image_3, image_4)

# Make the GIF directly
image_gif_1 <- image_animate(frames, fps = 1)
image_gif_1

# Make a gradient GIF
image_gif_2 <- image_morph(image_gif_1) %>%
  image_animate(fps = 10)
image_gif_2

# Save my animation
final_animation <- (image_gif_2)
image_write(image_gif_2, "my_animation.gif")

Creativity

In this project, first of all, in the part of “animation.R”, I borrowed some images of an animation character that I like personally, and the emojis made by people with it are also very cute. Secondly, in the part of “{css}” for the HTML background Settings, I used gradient color, which is also a combination of several colors, and then explore the result. Then, I also made a shadow effect on the “h1” and “h2” fonts (using “text-shadow: 5px 5px 10px rgba(16, 32, 245, 0.4)”), and I also resized the “h2” font (using “font-size: 30px”). After that, I used “”to extract motion images and other images in the project. This function comes directly to extract the motion graph and png I want.

Learning reflection

After a short first two weeks to learn about that how to write the code with R Studio of the Stats 220 course. I learned a lot of things. First of all, I learned how to edit pictures and complex programs with R Studio. Secondly, I learned how to use the basis of “magick” and edit the corresponding code and programs. Then, I also learned how to extract the memes I wanted to use and code them into the form I wanted (e.g., side-by-side, up-down, toggle back and forth, loop, turn a static image into a dynamic image, etc.). At the same time, I also learned how to use italics for fonts (such as “font-style: italic; */“). These are great progress and breakthroughs for me. Finally, thank you for watching my project.